<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险评估过滤结果</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .spacer { height: 16px; } /* 添加空行的高度 */
    </style>
</head>
<body>
    <div class="container">
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="riskAssessmentTable" lay-filter="riskAssessmentTable"></table>
        </div>
        <div class="spacer"></div> <!-- 添加空行 -->
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="cybersecurityReqTable" lay-filter="cybersecurityReqTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var selectedRowId = null; // 用于存储当前选中的行的 id
            // 计算表格的高度
            var windowHeight = window.innerHeight;
            var tableHeight = (windowHeight - 20)/2; // 减去其他元素的高度和一些边距
            // 渲染第一个表格
            table.render({
                elem: '#riskAssessmentTable',
                url: '/getFilteredTara',
                height: tableHeight,
                {#page: true,#}
                {#limit: 20,#}
                {#limits: [20, 50, 100],#}
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                     {type: 'radio', width: 60, align: 'center'},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'ecu', title: 'ECU', width: 80, align: 'center'},
                    {field: 'thread_type', title: '威胁类型', width: 120, align: 'center'},
                    {field: 'thread_scenario_number', title: '威胁场景编号', width: 160, align: 'left'},
                    {field: 'thread_scenario', title: '威胁场景', width: 420, align: 'left'},

                    {field: 'attack_level', title: '攻击等级', width: 80, align: 'center'},
                    {field: 'cybersecurity_req_dr', title: '网络安全设计需求', width: 280, align: 'left'},

                    {#{field: 'r_risk_est_r_level', title: '残余攻击可行性等级', width: 120, align: 'center'},#}
                    {#{field: 'r_risk_treatment_strategy', title: '残余风险等级', width: 120, align: 'center'},#}
                    {#{field: 'r_risk_est_explanation', title: '残余风险处置描述', width: 160, align: 'center'}#}
                ]],
                done: function (res, curr, count) {
                    console.log('第一个表格渲染完成');
                    // 重新选中之前选中的行
                    if (selectedRowId) {
                        var rowIndex = res.data.findIndex(function (item) {
                            return item.id === selectedRowId;
                        });
                        if (rowIndex !== -1) {
                            var rowElem = $('#riskAssessmentTable').find('tr[data-index="' + rowIndex + '"]');
                            rowElem.find('input[type="radio"]').prop('checked', true);
                            form.render('radio'); // 重新渲染单选框
                        }
                    }
                }
            });

            // 渲染第二个表格
            table.render({
                elem: '#cybersecurityReqTable',
                url: '/getFilteredCybersecurityReq',
                height: tableHeight,
                {#page: true,#}
                {#limit: 20,#}
                {#limits: [20, 50],#}
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'type', title: '类型', width: 150, align: 'center'},
                    {field: 'name_or', title: '安全需求名称', width: 210, align: 'left'},
                    {field: 'desc_or', title: '安全需求描述', width: 620, align: 'left'},
                    {field: 'state', title: '状态', width: 80, align: 'center'}
                ]],
                done: function (res, curr, count) {
                    console.log('第二个表格渲染完成');
                    // 监听第二个表格的行双击事件
                    table.on('rowDouble(cybersecurityReqTable)', function (obj) {
                        var selectedData = obj.data;
                        var reqId = selectedData.id;

                        console.log('鼠标双击 id=', reqId);
                        // 向后端发送请求，传递双击行的 id
                        $.ajax({
                            url: '/setCybersecurityReq',
                            type: 'POST',
                            data: {
                                req_id: reqId
                            },
                            success: function (response) {
                                if (response.code === 0) {
                                    layer.msg('设置成功');
                                    // reload 第一个表格 riskAssessmentTable
                                    table.reload('riskAssessmentTable',
                                        {
                                            url: '/getFilteredRiskAssessmentEcu'
                                        }
                                    );
                                } else {
                                    layer.msg('设置失败');
                                }
                            },
                            error: function () {
                                layer.msg('请求失败');
                            }
                        });
                    });
                }
            });

            // 监听第一个表格的单选框选择事件
            table.on('radio(riskAssessmentTable)', function (obj) {
                var selectedData = obj.data;
                var selectedId = selectedData.id;
                selectedRowId = selectedData.id; // 存储当前选中的行的 id
                var selectedType =  ''; // 假设后端返回了 ecu_feature_type selectedData.ecu_feature_type;

                // 刷新第二个表格
                table.reload('cybersecurityReqTable', {
                    url: '/getFilteredCybersecurityReq',
                    where: {
                        id: selectedId,
                        type: selectedType
                    },
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
            });
        });
    </script>
</body>
</html>